<template>
  <el-select
    v-model="selected"
    placeholder="请选择学期"
    clearable
    @change="onchange"
  >
    <el-option
      v-for="item in items"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import _categories from "@/common/categories";

export default {
  props: {
    value: {
      type: Number | null,
      default: null,
    },
  },

  watch: {
    value() {
      this.selected = this.value;
    },
  },

  data() {
    return {
      items: _categories.semesters,
      selected: this.value,
    };
  },

  methods: {
    onchange(value) {
      this.$emit("input", value);
    },
  },
};
</script>

<style>
</style>